<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置</title>
    <link rel="stylesheet" href="../../css/mdui.css">
    <style>
        /* 顶部导航栏 */
        
        .mdui-menu-cascade-custom {
            width: 300px;
        }
        
        .mdui-menu-cascade-custom>.mdui-menu-item>a {
            height: 40px;
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-box-align: center !important;
            -webkit-align-items: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
        }
        
        .user-head-img {
            background-size: cover !important;
            width: 60px;
            height: 60px;
        }
        /* 列表 */
        
        .mdui-col-md-7 {
            float: none;
            width: 58.333333%;
        }
        /* 头像 */
        
        .user-img-min {
            background-size: cover !important;
            width: 40px;
            height: 40px;
        }
    </style>
</head>

<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-color-grey-50">

    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 一个通知按钮 -->
                <a href="../Personal/notice.html">
                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                        <i class="mdui-icon material-icons">notifications</i>
                    </span>
                </a>

                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-menu="{target: '#login-menu'}">
                    <i class="mdui-icon material-icons">account_circle</i>
                </span>
                <!-- 小菜单 -->
                <ul class="mdui-menu mdui-menu-cascade mdui-menu-cascade-custom" id="login-menu">
                    <li class="mdui-menu-item">
                        <div class="mdui-row mdui-valign">
                            <div class="mdui-col-md-3 mdui-m-l-3">
                                <div class="user-head-img mdui-img-circle" style="background: url(../../images/touxiang1.jpg);"></div>
                            </div>
                            <div class="mdui-col-md-7 mdui-typo">
                                <div>姓名：李老师</div>
                                <div>工号：91145</div>
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="../Personal/notice.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">notifications_none</i>我的通知
                        </a>
                        <a href="../Personal/message.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">chat_bubble_outline</i>我的留言
                        </a>
                        <a href="../Personal/setting.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">settings</i>设置
                        </a>
                        <a href="../../login.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">exit_to_app</i>登出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->


    <article>
        <div class="mdui-container">
            <!-- 个人资料列表 -->
            <div class="mdui-row mdui-p-t-2">
                <div class="mdui-col-md-7 mdui-center">
                    <p>个人资料</p>
                </div>
            </div>

            <div class="mdui-row">
                <div class="mdui-col-md-7 mdui-color-white mdui-shadow-1 mdui-center">
                    <ul class="mdui-list mdui-text-color-black-text mdui-list-dense">
                        <li class="mdui-list-item mdui-ripple" mdui-dialog="{target: '#change-userimg'}">
                            <div class="mdui-list-item-avatar user-img-min mdui-img-circle" style="background: url(../../images/touxiang1.jpg);"></div>
                            <span class="mdui-list-item-content">头像</span>
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">chevron_right</i>
                        </li>
                        <!-- 修改头像弹出框 -->
                        <div class="mdui-dialog" id="change-userimg">
                            <div class="mdui-dialog-title">修改头像</div>
                            <div class="mdui-dialog-content">
                                <!-- 修改头像列表 -->
                                <ul class="mdui-list">
                                    <li class="mdui-list-item mdui-ripple">
                                        <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-red">folder</i>
                                        <div class="mdui-list-item-content">上传头像</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="mdui-divider"></div>

                        <li class="mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">perm_contact_calendar</i>
                            <div class="mdui-list-item-content">姓名</div>
                            <span class="mdui-float-right mdui-text-color-black-secondary">李老师</span>
                        </li>
                        <div class="mdui-divider"></div>

                        <li class="mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">school</i>
                            <div class="mdui-list-item-content">教师工号</div>
                            <span class="mdui-float-right mdui-text-color-black-secondary">91145</span>
                        </li>
                        <div class="mdui-divider"></div>


                        <li class="mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">equalizer</i>
                            <div class="mdui-list-item-content">所属院系</div>
                            <span class="mdui-float-right mdui-text-color-black-secondary">计算机科学与技术</span>
                        </li>
                        <div class="mdui-divider"></div>

                        <li class="mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">data_usage</i>
                            <div class="mdui-list-item-content">最后登录时间</div>
                            <span class="mdui-float-right mdui-text-color-black-secondary">2019-4-24 15:29:54</span>
                        </li>

                        <div class="mdui-divider"></div>

                        <li class="mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">event</i>
                            <div class="mdui-list-item-content">注册时间</div>
                            <span class="mdui-float-right mdui-text-color-black-secondary">2019-4-24 15:29:54</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 安全设置 -->
            <div class="mdui-row mdui-p-t-2">
                <div class="mdui-col-md-7 mdui-center">
                    <p>通用设置</p>
                </div>
            </div>

            <div class="mdui-row">
                <div class="mdui-col-md-7 mdui-color-white mdui-shadow-1 mdui-center">
                    <ul class="mdui-list mdui-text-color-black-text mdui-list-dense">
                        <li class="mdui-list-item mdui-ripple" mdui-dialog="{target: '#change-password'}">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">https</i>
                            <div class="mdui-list-item-content">修改密码</div>
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">chevron_right</i>
                        </li>
                        <!-- 修改密码的弹出框 -->
                        <div class="mdui-dialog" id="change-password">
                            <div class="mdui-dialog-title">修改登录密码</div>
                            <div class="mdui-dialog-content">
                                <!-- 原密码框 -->
                                <div class="mdui-row  mdui-center">
                                    <div class="mdui-textfield mdui-textfield-floating-label">
                                        <i class="mdui-icon material-icons">lock_outline</i>
                                        <label class="mdui-textfield-label">输入原密码</label>
                                        <input class="mdui-textfield-input" type="text" maxlength="20" required/>
                                    </div>
                                </div>
                                <!-- 新密码框 -->
                                <div class="mdui-row mdui-center">
                                    <div class="mdui-textfield mdui-textfield-floating-label">
                                        <i class="mdui-icon material-icons">lock</i>
                                        <label class="mdui-textfield-label">输入新密码</label>
                                        <input class="mdui-textfield-input" type="password" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" maxlength="20" required/>
                                        <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
                                        <div class="mdui-textfield-helper">请输入至少 6 位，且包含大小写字母的密码</div>
                                    </div>
                                </div>
                                <!-- 重复新密码框 -->
                                <div class="mdui-row mdui-center">
                                    <div class="mdui-textfield mdui-textfield-floating-label">
                                        <i class="mdui-icon material-icons">lock</i>
                                        <label class="mdui-textfield-label">确认新密码</label>
                                        <input class="mdui-textfield-input" type="password" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" maxlength="20" required/>
                                        <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
                                    </div>
                                </div>

                            </div>
                            <div class="mdui-dialog-actions">
                                <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                                <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>保存</button>
                            </div>
                        </div>


                        <div class="mdui-divider"></div>

                        <li class="mdui-list-item mdui-ripple">
                            <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-black-icon">notifications</i>
                            <div class="mdui-list-item-content">是否接收通知</div>
                            <span class="mdui-float-right mdui-text-color-black-secondary">
                                <label class="mdui-switch">
                                    <input type="checkbox" checked/>
                                    <i class="mdui-switch-icon"></i>
                                  </label>
                            </span>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </article>

    <!-- 左侧侧边栏 -->
    <aside>
        <!-- 抽屉栏 -->
        <nav class="mdui-drawer mdui-drawer-open " id="left-drawer">
            <ul id="mdui-menu-left-list" mdui-collapse="{accordion: true}" class="mdui-list">
                <a href="../index.html">
                    <li class="mdui-list-item mdui-ripple">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">home</i>
                        <div class=" mdui-list-item-content "> 首页 </div>
                    </li>
                </a>
                <div class="mdui-collapse-item">
                    <li class="mdui-collapse-item-header mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">event_note</i>
                        <div class="mdui-list-item-content ">作业</div>
                        <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                    </li>
                    <div class="mdui-collapse-item-body mdui-list">
                        <a href="../homework/index.html" class="mdui-list-item mdui-ripple ">作业列表</a>
                        <a href="../homework/myarticle.html" class="mdui-list-item mdui-ripple ">我的作业解析</a>
                    </div>
                </div>
                <a href="../chat/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">comment</i>
                        <div class="mdui-list-item-content ">交流</div>
                    </li>
                </a>

                <a href="../design/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">chrome_reader_mode</i>
                        <div class="mdui-list-item-content ">题库设计</div>
                    </li>
                </a>
                <li class="mdui-subheader ">综合</li>

                <div class="mdui-collapse-item">
                    <li class="mdui-collapse-item-header mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">cloud_download</i>
                        <div class="mdui-list-item-content ">资料下载</div>
                        <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                    </li>
                    <div class="mdui-collapse-item-body mdui-list">
                        <a href="../datadownload/recommend.html" class="mdui-list-item mdui-ripple ">优秀实验报告</a>
                        <a href="../datadownload/report.html" class="mdui-list-item mdui-ripple ">实验报告</a>
                        <a href="../datadownload/courseware.html" class="mdui-list-item mdui-ripple ">课件资料</a>
                    </div>
                </div>

                <a href="../evaluate/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">contacts</i>
                        <div class="mdui-list-item-content ">教师评教</div>
                    </li>
                </a>
                <a href="../answer/index.html">
                    <li class="mdui-list-item mdui-ripple ">
                        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-yellow-600">insert_chart</i>
                        <div class="mdui-list-item-content ">疑难点解析</div>
                    </li>
                </a>

            </ul>
        </nav>
    </aside>

    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2 ">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign ">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="../../js/mdui.js "></script>
</body>

</html>